<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事故</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">
    <el-button @click="toAdd">添加事故</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="worknum"
                label="工号">
        </el-table-column>
        <el-table-column
                prop="empName"
                label="姓名">
        </el-table-column>
        <el-table-column
                label="时间">
            <template slot-scope="scope">
                {{scope.row.createTime|format('yyyy-MM-dd hh:mm:ss')}}
            </template>
        </el-table-column>
        <el-table-column
                prop="shiguTypeName"
                label="事故类型">
        </el-table-column>
        <el-table-column
                prop="money"
                label="扣款金额">
        </el-table-column>
    </el-table>
    <el-dialog title="添加事故" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="员工" :label-width="formLabelWidth">
                <el-select v-model="form.eid" placeholder="请选择员工">
                    <el-option :label="e.name" :key="e.id" :value="e.id" v-for="e in empList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="事故类型" :label-width="formLabelWidth">
                <el-select v-model="form.stId" placeholder="请选择事故类型" @change="shiguTypeChange">
                    <el-option :label="e.name" :key="e.id" :value="e.id" v-for="e in shiguTypeList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="扣款" :label-width="formLabelWidth">
                <el-input v-model="form.money" disabled autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addShigu">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],

            //表单需要的字段
            dialogFormVisible: false,
            form: {
                eid:"",
                stId:"",
                money:""
            },
            formLabelWidth: '120px',
            empList:[],
            shiguTypeList:[],
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        watch:{
        },
        methods:{
            addShigu(){
                axios.post("/shigu/add",this.form).then(res=>{
                    this.$message.success("成功")
                    this.form = {
                        eid:"",
                        stId:"",
                        money:""
                    };
                    this.dialogFormVisible = false;
                    this.initData();
                })
            },
            shiguTypeChange(stId){
                this.form.money = this.shiguTypeList.find(st=>st.id==stId).money
            },
            toAdd(){
                this.dialogFormVisible = true;
            },
            initData(){
                axios.post("/shigu/findAll").then(res=>{
                    this.tableData = res.data;
                })
            },
            initEmpData(){
                axios.post("/emp/findAll").then(res=>{
                    this.empList = res.data;
                })
            },
            initShiguTypeData(){
                axios.post("/shigu-type/findAll").then(res=>{
                    this.shiguTypeList = res.data;
                })
            }
        },
        created(){
            this.initEmpData()
            this.initShiguTypeData()
            this.initData()
        }
    })
</script>

</body>
</html>
